<template>
    <div>
        <el-row class="row--filter" type="flex" align="middle">
            时间：
            <el-radio
                    class="filter-item"
                    v-for="{label, value} in dateOption"
                    v-model="dateRange"
                    :key="value"
                    :label="value"
                    @change="handleDateChange"
                    border>
                {{label}}
            </el-radio>
            <el-date-picker
                    v-show="showDateRangePicker"
                    class="filter-item"
                    v-model="queryParameter.dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :clearable="false"
                    :value-format="dateFormat">
            </el-date-picker>
        </el-row>
        <el-row>
          <Chart2BarLine :option="{title: '美居&插件DAU及转化率', legend: ['插件DAU', '美居DAU', '转化率']}" :data="chart2BarLine" />
        </el-row>
        <el-row type="flex" justify="center" align="middle">
          <ChartBarLine :option="{title: '插件MAU及环比', legend: ['MAU', '环比']}" :data="ChartBarLineMAU" />
          <ChartBarLine :option="{title: '插件WAU及环比', legend: ['WAU', '环比']}" :data="ChartBarLineWAU" />
        </el-row>
        <el-row type="flex" justify="center" align="middle">
          <ChartBar :option="{title: '插件DAU周同比', legend: ['正值', '负值'], specialColor: true}" :data="ChartBar" />
          <ChartSaleRatio :option="{title: '行为次数'}" :data="ChartSaleRatio" />
        </el-row>
    </div>
</template>

<script>
import { commonMixin as dateMixin } from '@/mixins/user-analysis'
import { subComponentMixin } from '@/mixins/user-analysis/user-operation'
import Chart2BarLine from './chart-2bar-line'
import ChartBarLine from './chart-bar-line'
import ChartBar from './chart-bar'
import ChartSaleRatio from './chart-sale-ratio'
export default {
  name: 'UserActiveTrend',
  mixins: [dateMixin, subComponentMixin],
  components: { Chart2BarLine, ChartBarLine, ChartBar, ChartSaleRatio },
  data () {
    return {
      queryParameter: {
        dateRange: null
      },
      chart2BarLine: [],
      ChartBarLineMAU: [],
      ChartBarLineWAU: [],
      ChartBar: [],
      ChartSaleRatio: []
    }
  },
  created () {},
  methods: {
    getData () {
      this._getAppPluginDauRatio()
      this._getPluginMauRatio()
      this._getPluginWauRatio()
      this._getPluginDauWeekRatio()
      this._getUserActiveTimes()
    },
    async _getAppPluginDauRatio () {
      const { data: { data, code } } = await this.$http
        .get(this.getApiUrl(`dataanalysis_iot/user_metrics/getAppPluginDauRatio`, false),
          {
            params: this.requestParams
          })
      if (code === 0) {
        this.chart2BarLine = data
      }
    },
    async _getPluginMauRatio () {
      const { data: { data, code } } = await this.$http
        .get(this.getApiUrl(`dataanalysis_iot/user_metrics/getPluginMauRatio`, false),
          {
            params: this.requestParams
          })
      if (code === 0) {
        this.ChartBarLineMAU = data.map(({ chainRelativeRatio, yearMonth, currentMau }) => {
          return {
            xAxis: yearMonth,
            line: chainRelativeRatio.replace(/%$/, ''),
            value1: currentMau
          }
        })
      }
    },
    async _getPluginWauRatio () {
      const { data: { data, code } } = await this.$http
        .get(this.getApiUrl(`dataanalysis_iot/user_metrics/getPluginWauRatio`, false),
          {
            params: this.requestParams
          })
      if (code === 0) {
        this.ChartBarLineWAU = data.map(({ chainRelativeRatio, yearWeek, currentWau }) => {
          return {
            xAxis: yearWeek,
            line: chainRelativeRatio.replace(/%$/, ''),
            value1: currentWau
          }
        })
      }
    },
    async _getPluginDauWeekRatio () {
      const { data: { data, code } } = await this.$http
        .get(this.getApiUrl(`dataanalysis_iot/user_metrics/getPluginDauWeekRatio`, false),
          {
            params: this.requestParams
          })
      if (code === 0) {
        this.ChartBar = data.map(({ weekOnWeekRatio, day }) => {
          weekOnWeekRatio = Number(weekOnWeekRatio.replace(/%$/, '')) / 100
          return {
            xAxis: day,
            value1: weekOnWeekRatio >= 0 ? weekOnWeekRatio : 0,
            value2: weekOnWeekRatio < 0 ? weekOnWeekRatio : 0
          }
        })
      }
    },
    async _getUserActiveTimes () {
      const { data: { data, code } } = await this.$http
        .get(this.getApiUrl(`dataanalysis_iot/user_metrics/getUserActiveTimes`, false),
          {
            params: this.requestParams
          })
      if (code === 0) {
        this.ChartSaleRatio = data.map(({ hour, useTimes }) => {
          return {
            xAxis: hour,
            line: useTimes
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "~element-theme-chalk/src/common/var.scss";
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";

    .row--filter {
        @include filter-row;
    }
</style>
